<template>
  <uni-popup ref="popup" :background-color="popupBgColor" :border-radius="popupBorderRadius"
    :is-mask-click="isMaskClick" @maskClick="maskClick" :animation="hasAnimation"
    :class="{ 'set-z-index-popup': isSetZIndex }">
    <view class="popup-wrap" :style="popupStyle">
      <slot name="header">
        <block v-if="isShowTitle">
          <view class="header">
            <text>{{ title }}</text>
            <uni-icons type="closeempty" size="16" @click="close"></uni-icons>
          </view>
        </block>
      </slot>
      <slot name="main">
        <view class="main">
          <text>{{ popupMsg }}</text>
        </view>
      </slot>
      <slot name="footer">
        <block v-if="isShowBtn">
          <view class="btn" :class="{ 'only-btn': isOnlyConfirmBtn, 'is-bottom-type': popupType == 'bottom' }">
            <view class="common-btn close-btn" :style="{ backgroundColor: cancelBtnBg, color:cancelBtnColor }" 
							@click="close" v-if="!isOnlyConfirmBtn">
							{{ cancelText }}
						</view>
            <view class="common-btn sure-btn" :style="{ backgroundColor: confirmBtnBg }" @click="confirm">
							{{ confirmText }}
						</view>
          </view>
        </block>
      </slot>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  isMaskClick: {
    type: Boolean,
    default: false,
  },
  popupType: {
    type: String,
    default: "center",
  },
  popupBgColor: {
    type: String,
    default: "#fff"
  },
  popupBorderRadius: {
    type: String,
    default: "20rpx"
  },
  popupStyle: {
    type: Object,
    default: () => {
      return {
        width: 540 + 'rpx',
        minHeight: 250 + 'rpx',
        maxHeight: 960 + 'rpx'
      }
    }
  },
  //是否显示标题
  isShowTitle: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "标题"
  },
  //是否显示按钮区
  isShowBtn: {
    type: Boolean,
    default: true,
  },
  popupMsg: {
    type: String,
    default: "确定关闭弹窗吗？",
  },
  cancelText: {
    type: String,
    default: "取消",
  },
	cancelBtnBg:{
		type: String,
		default: "#fff"
	},
	cancelBtnColor:{
		type: String,
		default: "#999"
	},
  //是否只需要确认按钮
  isOnlyConfirmBtn: {
    type: Boolean,
    default: false,
  },
  confirmText: {
    type: String,
    default: "确定",
  },
  confirmBtnBg: {
    type: String,
    default: "#1ab394",
  },
  //是否设置弹窗层级
  isSetZIndex: {
    type: Boolean,
    default: false
  },
  //是否有动画
  hasAnimation: {
    type: Boolean,
    default: true
  },
  //确认按钮后是否由父组件关闭弹窗
  isOutClose: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])
const popup = ref(null)
const maskClick = () => {
  props.isMaskClick && close()
}
const open = (type) => {
  popup.value.open(type);
}
const close = (type) => {
  popup.value.close(type);
  emit("cancel", false);
  emit("update:modelValue", false);
}
const confirm = () => {
  if (!props.isOutClose) {
    close(props.popupType)
  }
  emit("confirm");
}
watch(() => props.modelValue, (newVal) => {
  if (newVal) {
    open(props.popupType)
  } else {
    close(props.popupType)
  }
})
</script>

<style scoped lang="scss">
.popup-wrap {
  display: flex;
  flex-direction: column;
  color: $uni-color-1;
  border-radius: 10rpx;

  .header {
    width: 100%;
    min-height: 100rpx;
    padding: 0rpx 20rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-bottom: 1rpx solid #ddd;

    &>uni-icons {
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .main {
    flex: 1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
  }

  .btn {
    width: 100%;
    min-height: 100rpx;
    padding: 10rpx 20rpx 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;

    .common-btn {
      min-height: 70rpx;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      letter-spacing: 4rpx;
      box-sizing: border-box;
    }

    .close-btn {
      color: $uni-color-3;
      background: #fff;
      border: 1rpx solid #dbdbdb;
      border-radius: 10rpx;
      transform: rotateZ(360deg);
    }

    .sure-btn {
      color: #fff;
      margin-left: 20rpx;
      border-radius: 10rpx;
    }
  }

  .only-btn {
    justify-content: center;

    .common-btn {
      flex: none;
      width: 60%;
    }

    .sure-btn {
      margin-left: 0rpx;
    }
  }

  .is-bottom-type {
    min-height: 120rpx;
    padding-bottom: 40rpx;
  }
}
</style>
